<template>
  <div class="main">
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :default-checked-keys="checkedIds"
      :props="defaultProps"
      ref="tree"
    ></el-tree>

    <el-button type="primary" :loading="loading" @click="saveTree">保存</el-button>
    <el-button type>取消</el-button>
  </div>
</template>

<script>
export default {
  name: "roleTree",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      },
      checkedIds: [],
      loading: false
    };
  },
  mounted() {
    this.getRoles();
  },
  methods: {
    async getRoles() {
      let result = await this.$api.default.permission.getRoleById(
        this.$route.params.id
      );
      console.log(result.data, this.$route.params.id);
      if (result.code == 20000) {
        this.data = result.data.children;
        this.checkedIds = this.getCheckedForId(this.data);
      }
    },

    //获取选中的id
    getCheckedForId(result, initArr = []) {
      return result.reduce((pre, curr) => {
        if (curr.select && curr.level == 4) {
          pre.push(curr.id);
        } else if (curr.children.length > 0) {
          this.getCheckedForId(curr.children, pre);
        }
        return pre;
      }, initArr);
    },

    //保存功能
    saveTree() {
      this.loading = true;
      let checks = this.$refs.tree.getCheckedKeys().join(",");
      /* 
        vue elementUI tree树形控件获取父节点ID的实例
        修改源码:
        情况1: element-ui没有实现按需引入打包
          node_modules\element-ui\lib\element-ui.common.js    25382行修改源码  去掉 'includeHalfChecked &&'
          // if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
          if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
        情况2: element-ui实现了按需引入打包
          node_modules\element-ui\lib\tree.js    1051行修改源码  去掉 'includeHalfChecked &&'
          // if ((child.checked || includeHalfChecked && child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
          if ((child.checked || child.indeterminate) && (!leafOnly || leafOnly && child.isLeaf)) {
        */
      this.loading = true;
      this.$api.default.permission
        .doAssign(this.$route.params.id, checks)
        .then(result => {
          this.loading = false;
          this.$message.success(result.$message || "分配权限成功");
          // 必须在跳转前获取(跳转后通过this获取不到正确的数据了)
          const roleName = this.$route.query.roleName;
          const roles = this.$store.getters.roles;
          this.$router.replace({ name: "Role" });
          //   , () => {
          //     console.log("replace onComplete");
          //     // 跳转成功后, 判断如果更新的是当前用户对应角色的权限, 重新加载页面以获得最新的数据
          //     if (roles.includes(roleName)) {
          //       window.location.reload();
          //     }
          //   }
        });
    }
  }
};
</script>

<style>
.main {
  padding: 20px;
}
</style>